<template>
  <div class="home">
    <Header signinUp="true">
      <span slot="eleme" class="logo">{{ logo }}</span>
    </Header>
    <div class="paddingTop home-content">
      <div class="positioning">
        <div class="instructions">
          <span class="instr-title">当前定位城市</span>
          <span>定位不准时，请在城市列表中选择</span>
        </div>
        <div class="currentCity">
          <span class="current-title" @click="toSearchCity(guessCityid)">{{
            currentCity
          }}</span>
          <span class="iconfont icon-xiangyou1 right-icon"></span>
        </div>
      </div>
      <div class="hot-city">
        <p class="hot-title">热门城市</p>
        <div class="hot-content">
          <ul class="cls">
            <li
              v-for="item in hotcity"
              :key="item.id"
              @click="toSearchCity(item.id)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
      <!-- <div>{{ sortAllCity }}</div> -->
      <div>
        <ul>
          <li v-for="(value, name, index) in sortAllCity" :key="name">
            <div class="all-city">
              <p class="all-title" v-if="index == 0">{{ name }} (按字母排序)</p>
              <p class="all-title" v-else>{{ name }}</p>
              <div class="all-content">
                <ul class="cls contentCol">
                  <li
                    v-for="item in value"
                    :key="item.id"
                    @click="toSearchCity(item.id)"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/header/header";
import { hotcity, groupcity, cityGuess } from "../../service/getData";
import { getStore, setStore, saveStore } from "@/config/utils.js";
export default {
  data() {
    return {
      logo: "eleme",
      currentCity: "东莞",
      // 当前城市id
      guessCityid: "",
      // 当前城市
      guessCity: "",
      // 热门城市
      hotcity: "",
      // 所有城市
      groupcity: "",
    };
  },
  components: { Header },
  computed: {
    //按A-Z排序
    sortAllCity() {
      var sortList = {};
      for (let index = 65; index < 90; index++) {
        if (this.groupcity[String.fromCharCode(index)]) {
          sortList[String.fromCharCode(index)] =
            this.groupcity[String.fromCharCode(index)];
        }
      }

      return sortList;
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      // 获取当前城市
      cityGuess().then((res) => {
        this.guessCity = res.name;
        this.guessCityid = res.id;
      });
      //获取热门城市
      this.hotcity = saveStore("hotcity", hotcity);

      //获取所有城市
      this.groupcity = saveStore("groupcity", groupcity);
    },
    //选择城市
    toSearchCity(id) {
      this.$router.push({ path: "/city", query: { id } });
      // console.log(id);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.home-content {
  width: 100%;
  height: 100%;
}
.cls::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0.3rem;
  // color: #fff;
  // font-size: 0.7rem;
  @include sc(0.7rem, #fff);
}
.positioning {
  padding: 0.3rem 0 0;
  background: #fff;
}
.instructions {
  @include fj;
  border-bottom: 0.025rem solid $bc;
  padding: 0 0.5rem;
  height: 1.75rem;
  align-items: center;
  .instr-title {
    @include sc(0.5rem, #7f7e7f);
    font-weight: 400;
  }
  span {
    font-weight: 600;
    @include sc(0.5rem, #888888);
  }
}
.currentCity {
  @extend .instructions;

  .current-title {
    @include sc(0.75rem, $blue);
    font-weight: 400;
  }
  span {
    font-size: 0.7rem;
  }
}

.hot-city {
  background: #fff;
  margin-top: 0.6rem;
}
.hot-title {
  height: 1.5rem;
  line-height: 1.5rem;
  @include sc(0.6rem, #7f7e7f);
  padding-left: 0.5rem;
  border-bottom: 0.025rem solid $bc;
  border-top: 0.025rem solid $bc;
}
.hot-content {
  ul {
    li {
      float: left;
      width: 25%;
      height: 1.75rem;
      line-height: 1.75rem;
      text-align: center;
      @include sc(0.65rem, $blue);
      border-right: 0.025rem solid $bc;
      border-bottom: 0.025rem solid $bc;
    }
  }
}
.all-city {
  @extend .hot-city;
}
.all-title {
  @extend .hot-title;
}
.all-content {
  @extend .hot-content;
  .contentCol {
    li {
      color: #666;
      overflow: hidden; /*超出部分隐藏*/

      text-overflow: ellipsis; /* 超出部分显示省略号 */

      white-space: nowrap; /*规定段落中的文本不进行换行 */
    }
  }
}
</style>
